<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<meta name="format-detection" content="telephone=yes" />
	<meta name="description" content="home">
	<meta name="author" content="lijinbo">
	<title>新闻首页</title>
	<link rel="icon" href="/images/icons/home_icon.ico">
	<link rel="stylesheet" href="/css/css3-flex.css">
	<link rel="stylesheet" href="/css/normalize.css_v8.0.1.css">
	<link rel="stylesheet" href="/css/pagecss/news.css">
	<script src="/js/jq1.11.3.min.js"></script>
	<script src="/js/vue2.6.10.min.js"></script>
	<script src="/js/jqajax.js"></script>
</head>

<body>
	<div id="app" class="container_max">
		<div class="banner_max fdc jac">
			<div class="title">今日新闻</div>
			<div id="time"></div>
		</div>
		<div class="nav_max jsb ac">
			<span v-for="(item, index) in navList" :key="index" @click="aciveNav(item.type)" :name="item.type"
				:class="['nav_item_title', { 'active_nav':activeType == item.type }]">
				<div class="item_box ">
					{{ item.name }}
				</div>
			</span>
		</div>
		<div class="nav_max nav_max_fixed jsb ac">
			<span v-for="(item, index) in navList" :key="index" @click="aciveNav(item.type)" :name="item.type"
				:class="['nav_item_title', { 'active_nav':activeType == item.type }]">
				<div class="item_box ">
					{{ item.name }}
				</div>
			</span>
		</div>
		<div class="news_max">
			<div v-for="(item, index) in list" :key="index" class="news_item_box ac">
				<div class="img_box">
					<a :href="item.url">
						<img :src="item.thumbnail_pic_s" alt="">
					</a>
				</div>
				<div class="right_news_info">
					<a :href="item.url" class="title">{{ item.title }}</a>
					<div class="foot_msg">
						<span class="name">{{ item.author_name }}</span>
						<span class="time">{{ item.date }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data() {
			return {
				list: [],
				navList: [],
				activeType: 'top'
			}
		},
		created() {
			this.getNewsList(this.activeType)
		},
		methods: {
			getNewsList(type) {
				apiGet('/api/newsList', { type }).then(res => {
					this.list = res.data.list
					this.navList = res.data.navList
				})
			},
			aciveNav(type) {
				this.activeType = type
				this.getNewsList(type)
			}
		}
	})
	$(document).ready(function () {

		// 时间显示
		function getTime() {
			var date = new Date();
			$('#time').text(date.toLocaleString())
		}
		getTime()
		// 导航条吸附
		window.addEventListener('scroll', function () {
			let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
			if (scrollTop > $('.nav_max').offset().top) {
				$('.nav_max_fixed').css({
					"display": 'flex'
				})
			} else {
				$('.nav_max_fixed').hide()
			}
		}, false)
		// 时间
		setInterval(getTime, 1000);
	})
</script>

</html>